CSS @starting-style-ൽ വൈദഗ്ദ്ധ്യം നേടാം: ആനിമേഷൻ്റെ പ്രാരംഭ ഘട്ടങ്ങൾ നിർവചിക്കൽ

വെബ് ഡെവലപ്‌മെൻ്റിൻ്റെ ചലനാത്മകമായ ലോകത്ത്, ഉപയോക്തൃ അനുഭവം മെച്ചപ്പെടുത്തുന്നതിലും, വിഷ്വൽ ഫീഡ്‌ബ্যাক നൽകുന്നതിലും, ഉപയോക്താവിൻ്റെ ഇടപെടലുകളെ നയിക്കുന്നതിലും ആനിമേഷനുകൾ ഒരു പ്രധാന പങ്ക് വഹിക്കുന്നു. സിഎസ്എസ് ആനിമേഷനുകളും ട്രാൻസിഷനുകളും കാര്യമായി മെച്ചപ്പെട്ടിട്ടുണ്ടെങ്കിലും, ഒരു ആനിമേഷൻ്റെ പ്രാരംഭ ഘട്ടം കൃത്യമായി നിയന്ത്രിക്കുന്നത്, പ്രത്യേകിച്ച് ഉപയോക്താവിൻ്റെ ഇടപെടലുകളോ സ്റ്റേറ്റ് മാറ്റങ്ങളോ മൂലം ട്രിഗർ ചെയ്യപ്പെടുമ്പോൾ, പലപ്പോഴും ചില വെല്ലുവിളികൾ ഉയർത്തിയിരുന്നു. ഈ പ്രശ്നം ലളിതമായി പരിഹരിക്കാൻ രൂപകൽപ്പന ചെയ്ത ഒരു ശക്തമായ സിഎസ്എസ് ഫീച്ചറാണ് @starting-style at-rule.

വെല്ലുവിളി മനസ്സിലാക്കാം: ആനിമേഷൻ്റെ ആദ്യ ഫ്രെയിം

പരമ്പരാഗതമായി, ഒരു എലമെൻ്റിൽ ആനിമേഷൻ അല്ലെങ്കിൽ ട്രാൻസിഷൻ പ്രയോഗിക്കുമ്പോൾ, അതിൻ്റെ പ്രാരംഭ ഘട്ടം നിർണ്ണയിക്കുന്നത് ആനിമേഷൻ/ട്രാൻസിഷൻ ആരംഭിക്കുന്ന നിമിഷത്തിൽ എലമെൻ്റിൻ്റെ നിലവിലുള്ള കമ്പ്യൂട്ട് ചെയ്ത സ്റ്റൈലുകളെ അടിസ്ഥാനമാക്കിയാണ്. ഇത് അപ്രതീക്ഷിതമായ വിഷ്വൽ ജമ്പുകൾക്കോ പൊരുത്തക്കേടുകൾക്കോ കാരണമായേക്കാം, പ്രത്യേകിച്ചും ഇനിപ്പറയുന്ന സാഹചര്യങ്ങളിൽ:

• പേജുകൾക്കിടയിൽ നാവിഗേറ്റ് ചെയ്യുമ്പോൾ: ഒരു പുതിയ പേജിൽ ഒരു കമ്പോണൻ്റ് ആനിമേറ്റ് ചെയ്യുമ്പോൾ, ശ്രദ്ധിച്ചില്ലെങ്കിൽ അതിൻ്റെ പ്രാരംഭ സ്റ്റൈലുകൾ ഉദ്ദേശിച്ചതിൽ നിന്ന് വ്യത്യസ്തമായേക്കാം.
• ഹോവർ അല്ലെങ്കിൽ ഫോക്കസിൽ ആനിമേഷനുകൾ ട്രിഗർ ചെയ്യുമ്പോൾ: ആനിമേഷൻ സുഗമമായി ആരംഭിക്കുന്നതിന് മുമ്പ് എലമെൻ്റിൻ്റെ സ്റ്റൈലുകൾ ചെറുതായി ഫ്ലാഷ് ചെയ്യുകയോ മാറുകയോ ചെയ്തേക്കാം.
• ജാവാസ്ക്രിപ്റ്റ് വഴി പ്രയോഗിക്കുന്ന ആനിമേഷനുകൾ: ജാവാസ്ക്രിപ്റ്റ് ഒരു ക്ലാസ് ഡൈനാമിക്കായി ചേർത്ത് ആനിമേഷൻ ട്രിഗർ ചെയ്യുകയാണെങ്കിൽ, ക്ലാസ് ചേർക്കുന്നതിന് തൊട്ടുമുമ്പുള്ള എലമെൻ്റിൻ്റെ അവസ്ഥ ആനിമേഷൻ്റെ തുടക്കത്തെ സ്വാധീനിക്കുന്നു.
• display: none അല്ലെങ്കിൽ visibility: hidden ഉൾപ്പെടുന്ന ആനിമേഷനുകൾ: തുടക്കത്തിൽ റെൻഡർ ചെയ്യാത്ത എലമെൻ്റുകൾ ദൃശ്യമാക്കുന്നതുവരെ ആനിമേഷനുകളിൽ പങ്കെടുക്കാൻ കഴിയില്ല, ഇത് സുഗമമായ പ്രവേശനത്തിനു പകരം പെട്ടെന്നുള്ള പ്രത്യക്ഷപ്പെടലിലേക്ക് നയിക്കുന്നു.

ഒരു ലളിതമായ ഉദാഹരണം പരിഗണിക്കാം: ഒരു എലമെൻ്റ് ഫേഡ് ഇൻ ചെയ്യുകയും വലുതാവുകയും ചെയ്യണമെന്ന് നിങ്ങൾ ആഗ്രഹിക്കുന്നു. തുടക്കത്തിൽ എലമെൻ്റിന് opacity: 0, transform: scale(0.5) എന്നിവയുണ്ടെങ്കിൽ, അതിനുശേഷം opacity: 1, transform: scale(1) എന്നിവ ലക്ഷ്യമിടുന്ന ഒരു സിഎസ്എസ് ആനിമേഷൻ പ്രയോഗിക്കുകയാണെങ്കിൽ, ആനിമേഷൻ അതിൻ്റെ നിലവിലെ അവസ്ഥയിൽ നിന്ന് (അദൃശ്യവും ചെറുതുമായ) ആരംഭിക്കുന്നു. ഇത് പ്രതീക്ഷിച്ചതുപോലെ പ്രവർത്തിക്കുന്നു. എന്നാൽ, എലമെൻ്റിന് തുടക്കത്തിൽ opacity: 1, transform: scale(1) എന്നിവയുണ്ടെങ്കിൽ, അതിനുശേഷം opacity: 0, scale(0.5) എന്നിവയിൽ നിന്ന് ആരംഭിക്കേണ്ട ഒരു ആനിമേഷൻ പ്രയോഗിച്ചാലോ? @starting-style ഇല്ലാതെ, ആനിമേഷൻ എലമെൻ്റിൻ്റെ നിലവിലുള്ള opacity: 1, scale(1) എന്നിവയിൽ നിന്ന് ആരംഭിക്കും, ഇത് ഉദ്ദേശിച്ച പ്രാരംഭ ഘട്ടത്തെ ഫലപ്രദമായി ഒഴിവാക്കുന്നു.

@starting-style പരിചയപ്പെടുത്തുന്നു: പരിഹാരം

ഒരു എലമെൻ്റ് ആദ്യമായി ഡോക്യുമെൻ്റിലേക്ക് വരുമ്പോഴോ അല്ലെങ്കിൽ ഒരു പുതിയ അവസ്ഥയിലേക്ക് പ്രവേശിക്കുമ്പോഴോ അതിൽ പ്രയോഗിക്കുന്ന സിഎസ്എസ് ആനിമേഷനുകൾക്കും ട്രാൻസിഷനുകൾക്കും പ്രാരംഭ മൂല്യങ്ങൾ നിർവചിക്കാൻ @starting-style at-rule ഒരു ഡിക്ലറേറ്റീവ് മാർഗ്ഗം നൽകുന്നു. ഇത്, എലമെൻ്റിൻ്റെ നിർമ്മാണ സമയത്തോ ട്രാൻസിഷൻ്റെ തുടക്കത്തിലോ ഉള്ള ഡിഫോൾട്ട് സ്റ്റൈലുകളെ ആശ്രയിക്കാതെ, ആനിമേഷൻ ആരംഭിക്കേണ്ട സ്റ്റൈലുകളുടെ ഒരു കൂട്ടം വ്യക്തമാക്കാൻ നിങ്ങളെ അനുവദിക്കുന്നു.

ഇവയുമായി ചേർന്ന് ഉപയോഗിക്കുമ്പോൾ ഇത് വളരെ ശക്തമാണ്:

• @keyframes ആനിമേഷനുകൾ: 0% (അല്ലെങ്കിൽ from) എന്നതിൽ ആരംഭിക്കാത്ത ആനിമേഷനുകൾക്ക് പ്രാരംഭ ഘട്ടം നിർവചിക്കാൻ.
• സിഎസ്എസ് ട്രാൻസിഷനുകൾ: ട്രാൻസിഷൻ ഇല്ലാത്ത ഒരു അവസ്ഥയിൽ നിന്ന് ട്രാൻസിഷൻ്റെ തുടക്കത്തിലേക്ക് സുഗമമായ മാറ്റം ഉറപ്പാക്കാൻ.

@keyframes-നൊപ്പം @starting-style എങ്ങനെ പ്രവർത്തിക്കുന്നു

നിങ്ങൾ @keyframes ആനിമേഷനോടൊപ്പം @starting-style ഉപയോഗിക്കുമ്പോൾ, ആനിമേഷൻ്റെ ആദ്യ കീഫ്രെയിം (സാധാരണയായി 0% അല്ലെങ്കിൽ from കീഫ്രെയിം) പ്രാബല്യത്തിൽ വരുന്നതിന് *മുമ്പ്* പ്രയോഗിക്കേണ്ട സ്റ്റൈലുകൾ നിങ്ങൾക്ക് വ്യക്തമാക്കാൻ കഴിയും. ഒരു 'അദൃശ്യ' അല്ലെങ്കിൽ 'ചുരുങ്ങിയ' അവസ്ഥയിൽ നിന്ന് ആരംഭിക്കേണ്ട ആനിമേഷനുകൾക്ക് ഇത് പ്രത്യേകിച്ചും ഉപയോഗപ്രദമാണ്, കാരണം അല്ലാത്തപക്ഷം എലമെൻ്റ് ഡിഫോൾട്ട് ദൃശ്യമായ സ്റ്റൈലുകളോടെ റെൻഡർ ചെയ്യപ്പെട്ടേക്കാം.

ഇതിൻ്റെ സിൻ്റാക്സ് ലളിതമാണ്:

            
@keyframes fadeAndScale {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.5);
  }
}

.my-element {
  /* Other styles */
  animation: fadeAndScale 1s ease-out forwards;
}

@starting-style {
  opacity: 0;
  transform: scale(0.5);
}

            

              
                Copy
              
            
          

ഈ ഉദാഹരണത്തിൽ, .my-element ഫേഡ് ഔട്ട് ചെയ്യാനും ചുരുങ്ങാനും ഉദ്ദേശിച്ചുള്ളതാണ്. ഇത് തുടക്കത്തിൽ opacity: 1, transform: scale(1) എന്നിവയോടെ റെൻഡർ ചെയ്യപ്പെട്ടിരുന്നെങ്കിൽ, from { opacity: 1; transform: scale(1); } എന്നതിൽ നിന്ന് ആരംഭിക്കുന്ന ആനിമേഷൻ തൽക്ഷണമായി തോന്നുമായിരുന്നു, കാരണം അത് ഇതിനകം 'from' അവസ്ഥയിലാണ്. എന്നിരുന്നാലും, @starting-style ഉപയോഗിക്കുന്നതിലൂടെ, നമ്മൾ ബ്രൗസറിനോട് വ്യക്തമായി പറയുന്നു:

• ഈ ആനിമേഷൻ ആരംഭിക്കുമ്പോൾ, എലമെൻ്റ് opacity: 0 ഉപയോഗിച്ച് ദൃശ്യപരമായി തയ്യാറാക്കിയിരിക്കണം.
• അതിൻ്റെ ട്രാൻസ്ഫോം scale(0.5) ആയിരിക്കണം.

ഇത് എലമെൻ്റിൻ്റെ സ്വാഭാവിക അവസ്ഥ വ്യത്യസ്തമാണെങ്കിൽ പോലും, ആനിമേഷൻ നിർദ്ദിഷ്ട പ്രാരംഭ മൂല്യങ്ങളിൽ നിന്ന് ശരിയായി ആരംഭിക്കുന്നുവെന്ന് ഉറപ്പാക്കുന്നു. ബ്രൗസർ ഫലപ്രദമായി ഈ @starting-style മൂല്യങ്ങൾ പ്രയോഗിക്കുകയും, തുടർന്ന് ആ മൂല്യങ്ങളിൽ നിന്ന് from കീഫ്രെയിം ആരംഭിക്കുകയും, to കീഫ്രെയിമിലേക്ക് നീങ്ങുകയും ചെയ്യുന്നു. ആനിമേഷൻ forwards എന്ന് സെറ്റ് ചെയ്തിട്ടുണ്ടെങ്കിൽ, ആനിമേഷൻ പൂർത്തിയായ ശേഷം to കീഫ്രെയിമിൻ്റെ അവസാന അവസ്ഥ നിലനിർത്തുന്നു.

ട്രാൻസിഷനുകൾക്കൊപ്പം @starting-style എങ്ങനെ പ്രവർത്തിക്കുന്നു

ഒരു എലമെൻ്റിൽ സിഎസ്എസ് ട്രാൻസിഷൻ പ്രയോഗിക്കുമ്പോൾ, അത് ട്രാൻസിഷൻ സംഭവിക്കുന്നതിന് *മുമ്പുള്ള* എലമെൻ്റിൻ്റെ സ്റ്റൈലുകളും ട്രാൻസിഷൻ സംഭവിച്ചതിന് *ശേഷമുള്ള* സ്റ്റൈലുകളും തമ്മിൽ സുഗമമായി ഇൻ്റർപോളേറ്റ് ചെയ്യുന്നു. ട്രാൻസിഷൻ ട്രിഗർ ചെയ്യുന്ന അവസ്ഥ ഡൈനാമിക്കായി ചേർക്കുമ്പോഴോ, അല്ലെങ്കിൽ എലമെൻ്റിൻ്റെ ഡിഫോൾട്ട് റെൻഡർ ചെയ്ത അവസ്ഥയല്ലാത്ത ഒരു പ്രത്യേക പോയിൻ്റിൽ നിന്ന് ട്രാൻസിഷൻ ആരംഭിക്കാൻ നിങ്ങൾ ആഗ്രഹിക്കുമ്പോഴോ ആണ് വെല്ലുവിളി ഉണ്ടാകുന്നത്.

ഹോവർ ചെയ്യുമ്പോൾ വലുതാകുന്ന ഒരു ബട്ടൺ പരിഗണിക്കാം. ഡിഫോൾട്ടായി, ട്രാൻസിഷൻ ബട്ടണിൻ്റെ നോൺ-ഹോവർ അവസ്ഥയിൽ നിന്ന് ഹോവർ അവസ്ഥയിലേക്ക് സുഗമമായി നീങ്ങും.

            
.my-button {
  transition: transform 0.3s ease;
}

.my-button:hover {
  transform: scale(1.1);
}

            

              
                Copy
              
            
          

ഇത് പൂർണ്ണമായും ശരിയായി പ്രവർത്തിക്കുന്നു. ട്രാൻസിഷൻ ബട്ടണിൻ്റെ ഡിഫോൾട്ട് transform: scale(1) എന്നതിൽ നിന്ന് transform: scale(1.1) എന്നതിലേക്ക് ആരംഭിക്കുന്നു.

ഇനി, ബട്ടൺ ഒരു സ്കെയിൽ-അപ്പ് ഇഫക്റ്റോടെ ആനിമേറ്റ് *ചെയ്യണമെന്നും* തുടർന്ന്, ഹോവർ ചെയ്യുമ്പോൾ *കൂടുതൽ* വലുതാകണമെന്നും സങ്കൽപ്പിക്കുക. ബട്ടൺ തുടക്കത്തിൽ അതിൻ്റെ പൂർണ്ണ വലുപ്പത്തിൽ പ്രത്യക്ഷപ്പെടുകയാണെങ്കിൽ, ഹോവർ ട്രാൻസിഷൻ ലളിതമാണ്. എന്നാൽ ബട്ടൺ ഒരു ഫേഡ്-ഇൻ, സ്കെയിൽ-അപ്പ് ആനിമേഷൻ ഉപയോഗിച്ച് പ്രത്യക്ഷപ്പെടുകയും, അതിൻ്റെ *യഥാർത്ഥ* അവസ്ഥയിൽ നിന്നല്ലാതെ *നിലവിലെ* അവസ്ഥയിൽ നിന്ന് ഹോവർ ഇഫക്റ്റും സുഗമമായ സ്കെയിൽ-അപ്പ് ആകണമെന്ന് നിങ്ങൾ ആഗ്രഹിക്കുന്നുവെങ്കിലോ?

ഇവിടെയാണ് @starting-style അമൂല്യമാകുന്നത്. ഒരു എലമെൻ്റിൽ ആദ്യമായി റെൻഡർ ചെയ്യപ്പെടുമ്പോൾ (ഉദാഹരണത്തിന്, ഒരു കമ്പോണൻ്റ് ജാവാസ്ക്രിപ്റ്റ് വഴിയോ പേജ് ലോഡ് വഴിയോ DOM-ലേക്ക് പ്രവേശിക്കുമ്പോൾ) ആ ട്രാൻസിഷൻ്റെ പ്രാരംഭ അവസ്ഥ നിർവചിക്കാൻ ഇത് നിങ്ങളെ അനുവദിക്കുന്നു.

ഒരു എലമെൻ്റ് ഫേഡ് ചെയ്ത് സ്കെയിൽ ചെയ്ത് കാഴ്ചയിലേക്ക് വരണമെന്നും, തുടർന്ന് ഹോവർ ചെയ്യുമ്പോൾ കൂടുതൽ വലുതാകണമെന്നും കരുതുക. പ്രവേശനത്തിനായി ഒരു ആനിമേഷനും തുടർന്ന് ഹോവർ ഇഫക്റ്റിനായി ഒരു ട്രാൻസിഷനും നിങ്ങൾക്ക് ഉപയോഗിക്കാം:

            
@keyframes fadeInScale {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.animated-card {
  opacity: 0;
  transform: scale(0.8);
  animation: fadeInScale 0.5s ease-out forwards;
  transition: transform 0.3s ease;
}

.animated-card:hover {
  transform: scale(1.1);
}

/* Define the starting style for the initial entry animation */
@starting-style {
  opacity: 0;
  transform: scale(0.8);
}

            

              
                Copy
              
            
          

ഈ സാഹചര്യത്തിൽ, എലമെൻ്റ് opacity: 0, transform: scale(0.8) എന്നിവയോടെ റെൻഡറിംഗ് ആരംഭിക്കുന്നുവെന്ന് @starting-style നിയമം ഉറപ്പാക്കുന്നു, ഇത് fadeInScale ആനിമേഷൻ്റെ from കീഫ്രെയിമുമായി പൊരുത്തപ്പെടുന്നു. ആനിമേഷൻ പൂർത്തിയായി എലമെൻ്റ് opacity: 1, transform: scale(1) എന്നിവയിൽ സ്ഥിരപ്പെട്ടുകഴിഞ്ഞാൽ, ഹോവർ ഇഫക്റ്റിനായുള്ള ട്രാൻസിഷൻ ഈ അവസ്ഥയിൽ നിന്ന് transform: scale(1.1) എന്നതിലേക്ക് സുഗമമായി ഇൻ്റർപോളേറ്റ് ചെയ്യുന്നു. ഇവിടെ @starting-style പ്രത്യേകമായി ആനിമേഷൻ്റെ പ്രാരംഭ പ്രയോഗത്തെ സ്വാധീനിക്കുന്നു, അത് ആവശ്യമുള്ള വിഷ്വൽ പോയിൻ്റിൽ നിന്ന് ആരംഭിക്കുന്നുവെന്ന് ഉറപ്പാക്കുന്നു.

പ്രധാനമായും, ഡോക്യുമെൻ്റിലേക്ക് പുതുതായി ചേർക്കുന്ന എലമെൻ്റുകളിൽ പ്രയോഗിക്കുന്ന ട്രാൻസിഷനുകൾക്കാണ് @starting-style ബാധകമാകുന്നത്. ഒരു എലമെൻ്റ് ഇതിനകം നിലവിലുണ്ടെങ്കിൽ, അതിൻ്റെ സ്റ്റൈലുകൾ ഒരു ട്രാൻസിഷൻ പ്രോപ്പർട്ടി ഉൾപ്പെടുത്തുന്നതിനായി മാറുകയാണെങ്കിൽ, എലമെൻ്റ് പുതുതായി റെൻഡർ ചെയ്യപ്പെടുന്നില്ലെങ്കിൽ @starting-style ആ പ്രത്യേക ട്രാൻസിഷൻ്റെ തുടക്കത്തെ നേരിട്ട് സ്വാധീനിക്കുന്നില്ല.

ബ്രൗസർ പിന്തുണയും നടപ്പാക്കലും

@starting-style at-rule സിഎസ്എസ് സ്പെസിഫിക്കേഷനുകളിലെ താരതമ്യേന പുതിയ ഒരു കൂട്ടിച്ചേർക്കലാണ്. ഇതിൻ്റെ വ്യാപകമായ സ്വീകാര്യത അനുസരിച്ച്:

• Chrome, Edge എന്നിവയ്ക്ക് മികച്ച പിന്തുണയുണ്ട്.
• Firefox-ന് നല്ല പിന്തുണയുണ്ട്.
• Safari-യും നല്ല പിന്തുണ നൽകുന്നു.

ഏറ്റവും പുതിയ ബ്രൗസർ അനുയോജ്യത വിവരങ്ങൾക്കായി Can I Use പരിശോധിക്കുന്നത് എല്ലായ്പ്പോഴും നല്ലതാണ്. @starting-style പിന്തുണയ്ക്കാത്ത ബ്രൗസറുകളിൽ, ആനിമേഷൻ അല്ലെങ്കിൽ ട്രാൻസിഷൻ എലമെൻ്റിൻ്റെ നിലവിലുള്ള കമ്പ്യൂട്ട് ചെയ്ത സ്റ്റൈലുകളിലേക്ക് മടങ്ങും, ഇത് നേരത്തെ വിവരിച്ചതുപോലെ അത്ര മികച്ചതല്ലാത്ത ഫലത്തിന് കാരണമായേക്കാം.

മികച്ച രീതികളും നൂതന ഉപയോഗങ്ങളും

1. സ്ഥിരത പ്രധാനമാണ്

എലമെൻ്റ് എങ്ങനെ DOM-ലേക്ക് ചേർക്കുന്നു എന്നതിനെയോ അല്ലെങ്കിൽ അതിൻ്റെ പ്രാരംഭ കമ്പ്യൂട്ട് ചെയ്ത സ്റ്റൈലുകൾ എന്താണെന്നതിനെയോ പരിഗണിക്കാതെ, ആനിമേഷനുകളും ട്രാൻസിഷനുകളും സ്ഥിരമായി ആരംഭിക്കുന്നുവെന്ന് ഉറപ്പാക്കാൻ @starting-style ഉപയോഗിക്കുക. ഇത് കൂടുതൽ പ്രവചനാതീതവും മിനുക്കിയതുമായ ഉപയോക്തൃ അനുഭവം പ്രോത്സാഹിപ്പിക്കുന്നു.

2. നിങ്ങളുടെ കീഫ്രെയിമുകൾ ലളിതമാക്കുക

പ്രാരംഭ അവസ്ഥ (ഉദാഹരണത്തിന്, opacity: 0) ആവശ്യമുള്ള ഓരോ ആനിമേഷൻ്റെയും from കീഫ്രെയിമിൽ ചേർക്കുന്നതിന് പകരം, നിങ്ങൾക്ക് അത് ഒരിക്കൽ @starting-style-ൽ നിർവചിക്കാം. ഇത് നിങ്ങളുടെ @keyframes നിയമങ്ങളെ കൂടുതൽ വൃത്തിയുള്ളതും ആനിമേഷൻ്റെ പ്രധാന പുരോഗതിയിൽ കൂടുതൽ ശ്രദ്ധ കേന്ദ്രീകരിക്കുന്നതുമാക്കുന്നു.

3. സങ്കീർണ്ണമായ സ്റ്റേറ്റ് മാറ്റങ്ങൾ കൈകാര്യം ചെയ്യൽ

ഒന്നിലധികം സ്റ്റേറ്റ് മാറ്റങ്ങൾക്കോ ആനിമേഷനുകൾക്കോ വിധേയമാകുന്ന കമ്പോണൻ്റുകൾക്കായി, എലമെൻ്റുകൾ ചേർക്കുമ്പോഴോ അപ്‌ഡേറ്റ് ചെയ്യുമ്പോഴോ അവയുടെ പ്രാരംഭ രൂപം നിയന്ത്രിക്കാൻ @starting-style സഹായിക്കും. ഉദാഹരണത്തിന്, കമ്പോണൻ്റുകൾ പതിവായി മൗണ്ട് ചെയ്യുകയും അൺമൗണ്ട് ചെയ്യുകയും ചെയ്യുന്ന ഒരു സിംഗിൾ-പേജ് ആപ്ലിക്കേഷനിൽ (SPA), @starting-style ഉപയോഗിച്ച് ഒരു എൻട്രി ആനിമേഷൻ്റെ പ്രാരംഭ സ്റ്റൈൽ നിർവചിക്കുന്നത് സുഗമമായ രൂപം ഉറപ്പാക്കുന്നു.

4. പ്രകടനവുമായി ബന്ധപ്പെട്ട പരിഗണനകൾ

@starting-style നേരിട്ട് പ്രകടനത്തെ ബാധിക്കുന്നില്ലെങ്കിലും, അത് നിയന്ത്രിക്കുന്ന ആനിമേഷനുകളും ട്രാൻസിഷനുകളും ബാധിക്കുന്നു. ബ്രൗസറിന് കാര്യക്ഷമമായി കൈകാര്യം ചെയ്യാൻ കഴിയുന്ന transform, opacity പോലുള്ള പ്രോപ്പർട്ടികൾ എപ്പോഴും ആനിമേറ്റ് ചെയ്യാൻ ശ്രമിക്കുക. സാധ്യമെങ്കിൽ width, height, അല്ലെങ്കിൽ margin പോലുള്ള പ്രോപ്പർട്ടികൾ ആനിമേറ്റ് ചെയ്യുന്നത് ഒഴിവാക്കുക, കാരണം ഇവ ചെലവേറിയ ലേഔട്ട് റീകാൽക്കുലേഷനുകൾക്ക് കാരണമാകും.

5. പഴയ ബ്രൗസറുകൾക്കുള്ള ഫോൾബാക്കുകൾ

@starting-style പിന്തുണയ്ക്കാത്ത ബ്രൗസറുകളിലെ ഉപയോക്താക്കൾക്ക് ന്യായമായ അനുഭവം ഉറപ്പാക്കാൻ, നിങ്ങൾക്ക് ഫോൾബാക്ക് സ്റ്റൈലുകൾ നൽകാം. ഇവയാണ് എലമെൻ്റിൻ്റെ സ്വാഭാവിക പ്രാരംഭ സ്റ്റൈലുകൾ, അല്ലാത്തപക്ഷം ആനിമേഷൻ അവിടെ നിന്നായിരിക്കും ആരംഭിക്കുക. പല കേസുകളിലും, ആനിമേഷൻ ലളിതമാണെങ്കിൽ @starting-style ഇല്ലാത്ത ഡിഫോൾട്ട് സ്വഭാവം സ്വീകാര്യമായേക്കാം.

കൂടുതൽ സങ്കീർണ്ണമായ സാഹചര്യങ്ങളിൽ, ബ്രൗസർ പിന്തുണ കണ്ടെത്താനോ പ്രത്യേക പ്രാരംഭ സ്റ്റൈലുകൾ പ്രയോഗിക്കാനോ നിങ്ങൾക്ക് ജാവാസ്ക്രിപ്റ്റ് ആവശ്യമായി വന്നേക്കാം. എന്നിരുന്നാലും, അത്തരം ജാവാസ്ക്രിപ്റ്റ് ഇടപെടലുകളുടെ ആവശ്യം കുറയ്ക്കുക എന്നതാണ് @starting-style-ൻ്റെ ലക്ഷ്യം.

6. ആഗോളതലത്തിലുള്ള ലഭ്യതയും പ്രാദേശികവൽക്കരണവും

ഒരു ആഗോള പ്രേക്ഷകർക്കായി വികസിപ്പിക്കുമ്പോൾ, ആനിമേഷനുകൾ എല്ലാവരെയും ഉൾക്കൊള്ളുന്നതും രാജ്യ-നിർദ്ദിഷ്ട വിഷ്വൽ സൂചനകളെ ആശ്രയിക്കാത്തതും ആയിരിക്കണം. @starting-style at-rule സാംസ്കാരിക പശ്ചാത്തലത്തിൽ നിന്ന് സ്വതന്ത്രമായി പ്രവർത്തിക്കുന്ന ഒരു സാങ്കേതിക സിഎസ്എസ് ഫീച്ചറാണ്. സാംസ്കാരികമായി സെൻസിറ്റീവായ രീതിയിൽ സ്റ്റൈൽ ചെയ്യാനും പ്രയോഗിക്കാനും കഴിയുന്ന ആനിമേഷനുകൾക്ക് സ്ഥിരമായ ഒരു സാങ്കേതിക അടിത്തറ നൽകുന്നതിലാണ് ഇതിൻ്റെ മൂല്യം. വ്യത്യസ്ത ഉപകരണങ്ങളിലും നെറ്റ്‌വർക്ക് സാഹചര്യങ്ങളിലും സുഗമമായ ആനിമേഷനുകൾ ഉറപ്പാക്കുന്നത് വെബ് ഡെവലപ്പർമാർക്ക് ഒരു സാർവത്രിക ലക്ഷ്യമാണ്, ആ സ്ഥിരത കൈവരിക്കുന്നതിന് @starting-style സംഭാവന നൽകുന്നു.

ഉദാഹരണം: ഒരു പോർട്ട്‌ഫോളിയോ കാർഡ് ആനിമേഷൻ

ഒരു സാധാരണ വെബ് ഡിസൈൻ പാറ്റേൺ ഉപയോഗിച്ച് നമുക്ക് ഇത് വ്യക്തമാക്കാം: ഒരു പോർട്ട്‌ഫോളിയോ ഗ്രിഡ്, അതിൽ ഓരോ കാർഡും ഒരു ചെറിയ കാലതാമസത്തോടെയും സ്കെയിലിംഗ് ഇഫക്റ്റോടെയും ആനിമേറ്റ് ചെയ്ത് കാഴ്ചയിലേക്ക് വരുന്നു.

ലക്ഷ്യം: ഓരോ കാർഡും ഫേഡ് ഇൻ ചെയ്യുകയും 0.9-ൽ നിന്ന് 1-ലേക്ക് വലുതാവുകയും വേണം, കൂടാതെ ഗ്രിഡിൽ പ്രത്യക്ഷപ്പെടുമ്പോൾ ഓരോ കാർഡിനും ചെറിയ കാലതാമസം നൽകണം.

HTML:

            
<div class="portfolio-grid">
  <div class="portfolio-item">Card 1</div>
  <div class="portfolio-item">Card 2</div>
  <div class="portfolio-item">Card 3</div>
  <div class="portfolio-item">Card 4</div>
</div>

            

              
                Copy
              
            
          

CSS:

            
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
  padding: 20px;
}

.portfolio-item {
  background-color: #f0f0f0;
  padding: 30px;
  border-radius: 8px;
  text-align: center;
  font-size: 1.2em;
  color: #333;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);

  /* Default initial state */
  opacity: 0;
  transform: scale(0.9);

  /* Animation properties */
  animation: fadeInUpScale 0.6s ease-out forwards;
}

/* @keyframes for the animation */
@keyframes fadeInUpScale {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* @starting-style to define the initial state for the animation */
@starting-style {
  opacity: 0;
  transform: scale(0.9);
}

/* Applying delays to each item using :nth-child */
.portfolio-item:nth-child(1) {
  animation-delay: 0.1s;
}
.portfolio-item:nth-child(2) {
  animation-delay: 0.2s;
}
.portfolio-item:nth-child(3) {
  animation-delay: 0.3s;
}
.portfolio-item:nth-child(4) {
  animation-delay: 0.4s;
}

/* Adjusting keyframes to show the effect */
@keyframes fadeInUpScale {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

            

              
                Copy
              
            
          

വിശദീകരണം:

1. .portfolio-item എലമെൻ്റുകൾ തുടക്കത്തിൽ opacity: 0, transform: scale(0.9) എന്നിങ്ങനെ സെറ്റ് ചെയ്തിരിക്കുന്നു. ആനിമേഷൻ പ്രയോഗിക്കുന്നതിന് മുമ്പുള്ള അവയുടെ അവസ്ഥ ഇതാണ്.
2. @keyframes fadeInUpScale ആനിമേഷനെ 0% (ഇത് ആനിമേഷൻ്റെ പുരോഗതിയുടെ പ്രാരംഭ ഘട്ടമാണ്) മുതൽ 100% വരെ നിർവചിക്കുന്നു.
3. fadeInUpScale ആനിമേഷൻ പ്രയോഗിക്കുമ്പോൾ, അത് opacity: 0, transform: scale(0.9) എന്നിവയോടെ ആരംഭിക്കണമെന്ന് @starting-style നിയമം വ്യക്തമായി പ്രഖ്യാപിക്കുന്നു. ഡിഫോൾട്ട് സ്റ്റൈലുകൾ എങ്ങനെയെങ്കിലും മാറിയാലും, ആനിമേഷൻ ഈ നിർവചിച്ച പോയിൻ്റിൽ നിന്ന് തന്നെ ആരംഭിക്കുമെന്ന് ഇത് ഉറപ്പാക്കുന്നു.
4. ഓരോ ചൈൽഡിനും :nth-child സെലക്ടറുകൾ ഉപയോഗിച്ച് animation-delay പ്രോപ്പർട്ടി പ്രയോഗിക്കുന്നതിലൂടെ കാർഡുകളുടെ പ്രത്യക്ഷപ്പെടലിന് ഒരു താളം നൽകുന്നു, ഇത് കൂടുതൽ ആകർഷകമായ ഒരു ക്രമം സൃഷ്ടിക്കുന്നു.
5. forwards എന്ന കീവേഡ് ആനിമേഷൻ പൂർത്തിയായ ശേഷം എലമെൻ്റ് അവസാന കീഫ്രെയിമിലെ സ്റ്റൈലുകൾ നിലനിർത്തുന്നുവെന്ന് ഉറപ്പാക്കുന്നു.

@starting-style ഇല്ലാതെ, ബ്രൗസർ .portfolio-item-ൻ്റെ പ്രാരംഭ കമ്പ്യൂട്ട് ചെയ്ത സ്റ്റൈലുകൾ ആനിമേഷൻ്റെ ആരംഭ പോയിൻ്റായി ശരിയായി വ്യാഖ്യാനിച്ചില്ലെങ്കിൽ, ആനിമേഷൻ മറ്റൊരു, ഉദ്ദേശിക്കാത്ത അവസ്ഥയിൽ നിന്ന് ആരംഭിച്ചേക്കാം. ആനിമേഷൻ ഉദ്ദേശിച്ച മൂല്യങ്ങളിൽ നിന്ന് ശരിയായി ആരംഭിക്കുന്നുവെന്ന് @starting-style ഉറപ്പ് നൽകുന്നു.

ഉപസംഹാരം

സിഎസ്എസ് ആനിമേഷനുകളിലും ട്രാൻസിഷനുകളിലും ഒരു സുപ്രധാന മുന്നേറ്റമാണ് @starting-style at-rule. ആനിമേറ്റഡ് എലമെൻ്റുകളുടെ പ്രാരംഭ ഘട്ടങ്ങളിൽ കൂടുതൽ കൃത്യമായ നിയന്ത്രണം നേടാൻ ഇത് ഡെവലപ്പർമാരെ സഹായിക്കുന്നു, ഇത് കൂടുതൽ സുഗമവും, പ്രവചനാതീതവും, പ്രൊഫഷണലായി മിനുക്കിയതുമായ യൂസർ ഇൻ്റർഫേസുകളിലേക്ക് നയിക്കുന്നു. @starting-style മനസ്സിലാക്കുകയും നടപ്പിലാക്കുകയും ചെയ്യുന്നതിലൂടെ, നിങ്ങളുടെ വെബ് ആനിമേഷനുകളെ നല്ലതിൽ നിന്ന് മികച്ചതിലേക്ക് ഉയർത്താനും, നിങ്ങളുടെ ആഗോള പ്രേക്ഷകർക്ക് വൈവിധ്യമാർന്ന ഉപകരണങ്ങളിലും ബ്രൗസറുകളിലും സ്ഥിരവും ആകർഷകവുമായ അനുഭവം ഉറപ്പാക്കാനും കഴിയും. ഉപയോക്താക്കളെ ശരിക്കും ആകർഷിക്കുന്ന അതിശയകരമായ ആനിമേറ്റഡ് വെബ് അനുഭവങ്ങൾ സൃഷ്ടിക്കാൻ ഈ ശക്തമായ ഉപകരണം ഉപയോഗിക്കുക.